<script setup lang='ts'>
import defaultImg from '@/assets/微信图片_20230612151700.jpg'
import { getCommentNum, getJoinTeamMessage, getLikeNum } from '@/api/message';
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter()
const teamChatList = ref()
// 获取队伍聊天室
const getTeamChatList = async () => {
  const res = await getJoinTeamMessage()
  if(res.data.code === 0){
    teamChatList.value = res.data.data
  }
}

// 获取新消息num
const likeNum = ref()
const commentNum = ref()
const getNewLike = async () => {
  const res = await getLikeNum()
  likeNum.value = res.data.data
}
const getNewComment = async () => {
  const res = await getCommentNum()
  commentNum.value = res.data.data
}
onMounted(() => {
  getTeamChatList()
  getNewLike()
  getNewComment()
})

// 队伍聊天室
const toTeamChat = (teamId: any,teamName: any) => {
  router.push({
    path: '/chat',
    query: {
      teamName,
      teamId,
      teamType: 2
    }
  })
}
</script>
<template>
  <van-grid clickable :column-num="3" :border="false">
    <van-grid-item icon="like" v-if="likeNum>0" :badge="likeNum" text="帖子点赞" icon-color="#fd5e5a" to="/message/like" />
    <van-grid-item icon="like" v-else text="帖子点赞" icon-color="#fd5e5a" to="/message/like" />
    <van-grid-item icon="contact" text="新增关注" icon-color="#3685fe" to="/message/follow" />
    <van-grid-item icon="comment" text="所有评论" icon-color="#35d99c" to="/message/comments" />
  </van-grid>
  <van-cell to="/message/private">
    <template #title>
      <span class="title">私信</span>
    </template>
    <template #icon>
      <div class="icon_area">
        <van-icon name="envelop-o" size="1.5rem" />
      </div>
    </template>
  </van-cell>
  <van-cell @click="$router.push('/chat')">
    <template #title>
      <span class="title">官方聊天室</span>
    </template>
    <template #label>
      <span class="title">桃园交友官方聊天室</span>
    </template>
    <template #value>
      <van-tag color="#ffe1e1" text-color="#ad0000">官方</van-tag>
    </template>
    <template #icon>
        <van-image fit="fill" class="team_img" src="http://se837qsbo.hn-bkt.clouddn.com/logo.jpg" />
    </template>
  </van-cell>
  <van-cell v-if="teamChatList" v-for="team in teamChatList" @click="toTeamChat(team.id,team.name)">
    <template #title>
      <span class="title">{{ team.name + '聊天室'}}</span>
    </template>
    <template #label>
      <span class="title">{{ team.description}}</span>
    </template>
    <template #icon>
      <van-image fit="fill" class="team_img" round :src="team.coverImage || defaultImg" />
    </template>
  </van-cell>
</template>
<style scoped >
.icon_area{
  height: 50px;
  width: 50px;
  background-color: #ededed;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.title{
  margin-left: 10px;
}
.team_img{
  height: 50px;
  width: 50px;
}
</style>: any: any
